<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>元宵节</title>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0'/>
<!--<link rel="stylesheet" href="/dist/css/swiper.min.css">
<link rel="stylesheet" href="/dist/css/animate.min.css">
<script src="/dist/js/swiper.min.js"></script>
<script src="/dist/js/swiper.animate.min.js"></script>-->

<link rel="stylesheet" href="css/swiper.min.css">
<link rel="stylesheet" href="css/animate.min.css">
<script src="js/swiper.min.js"></script>
<script src="js/swiper.animate.min.js"></script>

<style>
*{
	margin:0;
	padding:0;
}
html,body{
	height:100%;
}
body{
	font-family:"microsoft yahei";
}
.swiper-container {
  /*  width: 320px;
    height: 480px;*/
	width: 100%;
    height: 100%;
	background:#fff;
}
.swiper-slide:nth-of-type(1){
	width:100%;
	height:100%;
	background:url(invite/beijing.png) no-repeat left top;
	background-size:100% 100%;
}
.swiper-slide{
	width:100%;
	height:100%;
	background:url(invite/beijing2.png) no-repeat left top;
	background-size:100% 100%;
}
img{
	display:block;
}
.swiper-pagination-bullet {
width: 6px;
height: 6px;
background: #fff;
opacity: .4;
}
.swiper-pagination-bullet-active {
opacity: 1;
}
@-webkit-keyframes tipmove
{
	0%
	{bottom:0px;opacity:0}
	50%
	{bottom:5px;opacity:1}
	100%
	{bottom:10px;opacity:0}
}

.ani{
	position:absolute;
	}
.txt{
	position:absolute;
}
#array2{
	position:absolute;z-index:999;-webkit-animation: tipmove 1.5s infinite ease-in-out;
}
#array1{
	position:absolute;z-index:999;-webkit-animation: scrolmove 1.5s infinite ease-in-out;
}
.arro1{
	-webkit-animation: arro1move 1.5s  infinite ease-in-out;
	animation-delay:3 s;
	opacity: 0;
}
@-webkit-keyframes arro1move
{
	0%
	{bottom:0px;opacity:0}
	50%
	{bottom:5px;opacity:1}
	100%
	{bottom:10px;opacity:0}
}
.s2-content{
	width: 330px;
	background-color: rgba(1,1,1,.5);
	margin-left: -165px;
	left: 50%;
	top: 10%;
	position: relative;
	overflow: hidden;
}
.s2-content-title{
	background: rgb(222,222,222,.2);
	position: relative;
	height: 35px;
	margin-top: 30px;
}
.content-txt{
	color: #FFFFFF;
	font-size: 15px;
	background: red;
	width: 230px;
	text-align: left;
	margin: 30px auto;
}
.content-txt p{
	margin: 3px 0;
}
</style>
</head>

<body>
<div class="swiper-container">
    <div class="swiper-wrapper">
    <!---slide1----------------->
        <!-- <section class="swiper-slide">
					<img src="invite/s1-t1.png" class="ani resize"
						style="width:163px;left:81px;top:80px;z-index:5;"
						swiper-animate-effect="zoomInDown"
						swiper-animate-duration="1s" swiper-animate-delay="1s">
					<img src="invite/s1-Partner recruitment.png" class="ani resize"
							style="width:100px;left:112px;top:135px;z-index:5;"
							swiper-animate-effect="fadeInRight"
							swiper-animate-duration="0.5s" swiper-animate-delay="1.5s">
					<img src="invite/s1-t2.png" class="ani resize"
						style="width:130px;left:95px;top:160px;z-index:5;"
						swiper-animate-effect="bounceIn"
						swiper-animate-duration="0.5s" swiper-animate-delay="2s">
					<img src="invite/s1-t3.png" class="ani resize"
						style="width:200px;left:60px;top:152px;z-index:5;"
						swiper-animate-effect="fadeInRight"
						swiper-animate-duration="0.5s" swiper-animate-delay="1.8s">
					<img src="invite/s1-bottom.png" class="ani resize"
						style="width:200px;left:60px;top:310px;z-index:5;"
						swiper-animate-effect="fadeIn"
						swiper-animate-duration="0.5s" swiper-animate-delay="2.1s">
					<img src="invite/s1-arro.png" class="ani resize arro1"
						style="width:35px;left:145px;top:350px;z-index:5;">
        </section> -->
     <!---slide2-------------->
        <section class="swiper-slide">

					<div class="s2-content">
						<div class="s2-content-title">
							<img src="invite/s2-t1.png"  class="ani resize"
							style="position: absolute;width:120px;top: 1px;left:50%;">
						</div>
						<div class="content-txt">
							<p >"52教育"平台是利用先进的互联网</p>
								<p >技术，建立托福机构与家长实时通</p>
								<p >讯的平台，是建立可靠的用户认证</p>
								<p >体系，完善家长、学生与机构的信</p>
								<p>息匹配，完善服务的系统，帮助托</p>
								<p>辅机构健全管理体系，提升服务质</p>
								<p>量。平台旨在通过互联网大数据，</p>
								<p>整合机构教育资源、社会服务资源</p>
								<p>,给学生、家长和机构提供专业、</p>
								<p>信赖、便捷的线上线下辅导教育高</p>
								<p>质量的服务。</p>
						</div>
						</div>
					</div>
					<img src="images/arrobg.png"
						style="position: absolute;width:200px; bottom:0px; left:60px;"  class="ani resize"
						swiper-animate-effect="rubberBand"
						swiper-animate-duration="1s" swiper-animate-delay="1s">
					<img src="images/arro.png" style="position: absolute;width:30px;bottom:0px; left:145px;" id="array2" class="resize">
        </section>
     <!--slide3-------------->
        <section class="swiper-slide">
					<img src="images/arrobg.png"
						style="position: absolute;width:200px; bottom:0px; left:60px;"  class="ani resize"
						swiper-animate-effect="rubberBand"
						swiper-animate-duration="1s" swiper-animate-delay="1s">
					<img src="images/arro.png" style="position: absolute;width:30px;bottom:0px; left:145px;" id="array2" class="resize">
        </section>
        <!---slide4----------------->
        <section class="swiper-slide">
	        <div class="ani resize" style="width:120px;height:110px;left:110px;top:184px;z-index:3;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="1s"  >
	        <div class="txt">
	        <p style="width:15px;color:#b60927; display:inline-block; font-size:90%; line-height:1; margin-right:10px;">"52教育"平台是利用先进的互联网</p>
	        <p style="width:15px;color:#b60927; display:inline-block; font-size:90%; line-height:1; margin-right:10px;">技术，建立托福机构与家长实时通</p>
	        <p style="width:15px;color:#b60927; display:inline-block; font-size:90%; line-height:1; margin-right:10px;">美丽花灯传递吉祥</p>
	        <p style="width:15px;color:#b60927; display:inline-block; font-size:90%; line-height:1; margin-right:10px;">圆圆汤圆味道芬芳</p></div>
	        </div>
	        <div class="ani resize" style="width:60px;height:110px;left:260px;top:185px;z-index:3;color:#b60927; font-size:160%; font-weight:bold;" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="1s"  >
	        <div class="txt">
	        元<br>宵<br>节</div>
	        </div>
	        <img src="upload/flower.png" class="ani resize" style="width:180px;height:220px;left:0;top:0;z-index:2;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0s"   >
	        <img src="upload/s1.png"  class="ani resize" style="width:320px;height:200px;left:0px;top:140px;z-index:1;" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s"  >
					<img src="images/arrobg.png"
						style="position: absolute;width:200px; bottom:0px; left:60px;"  class="ani resize"
						swiper-animate-effect="rubberBand"
						swiper-animate-duration="1s" swiper-animate-delay="1s">
					<img src="images/arro.png" style="position: absolute;width:30px;bottom:0px; left:145px;" id="array2" class="resize">
        </section>
    </div>

   <!-- <img src="images/web-swipe-tip.png" style="width:20px;height:15px; top:460px; left:150px;" id="array" class="resize"> -->
  <div class="swiper-pagination"></div>
</div>


<script>

scaleW=window.innerWidth/320;
scaleH=window.innerHeight/480;
var resizes = document.querySelectorAll('.resize');
          for (var j=0; j<resizes.length; j++) {
           resizes[j].style.width=parseInt(resizes[j].style.width)*scaleW+'px';
		   resizes[j].style.height=parseInt(resizes[j].style.height)*scaleH+'px';
		   resizes[j].style.top=parseInt(resizes[j].style.top)*scaleH+'px';
		   resizes[j].style.left=parseInt(resizes[j].style.left)*scaleW+'px';

          }
var scales = document.querySelectorAll('.txt');
for (var i=0; i<scales.length; i++) {
	ss=scales[i].style;
	ss.webkitTransform = ss.MsTransform = ss.msTransform = ss.MozTransform = ss.OTransform =ss.transform='translateX('+scales[i].offsetWidth*(scaleW-1)/2+'px) translateY('+scales[i].offsetHeight*(scaleH-1)/2+'px)scaleX('+scaleW+') scaleY('+scaleH+') ';
}


  var mySwiper = new Swiper ('.swiper-container', {
    direction : 'vertical',
    pagination: {
	   el:'.swiper-pagination',
    },
    mousewheel: true,
    on:{
		slideChangeTransitionEnd: function(){
			 alert(this.activeIndex);//切换结束时，告诉我现在是第几个slide
		 },
	  init: function(){
        swiperAnimateCache(this);
        swiperAnimate(this);
 	  },
      slideChangeTransitionEnd: function(){
  	    swiperAnimate(this);
      }
    }
  })
  </script>
</body>
</html>
